import { For } from "solid-js";
import { linux, logo } from "./assets";
import { TitleBar } from "./TitleBar";

const item = {
  text: "armbian/sid",
  icon: linux,
};
const items = [item];

export const AptAnalyzer = () => {
  // # A/B 规则，默认源前缀为北外源，/ 转为 dists
  // # debian/bullseye
  // # https://mirrors.bfsu.edu.cn/A/dists/B
  // armbian/sid

  return (
    <>
      <div>
        {/* 标题栏 */}
        <TitleBar />

        {/* 主框架内容 */}
        <div className="m-1 flex flex-row border border-black">
          {/* 左侧 */}
          <div className="flex w-1/4 flex-col border border-black px-1">
            {/* 头部 */}
            <div className="py-1">
              <span>发行版与源</span>
            </div>
            {/* 搜索 */}
            <input type="text" className="" placeholder="输入可筛选内容" />
            {/* 列表容器 */}
            <div className="px-1 pt-1">
              <div className="border border-black bg-white px-2 py-1">
                <For each={items}>
                  {(v, index) => (
                    <div
                      key={index()}
                      class="flex flex-1 flex-row items-center"
                    >
                      <img className="h-[32px] w-[32px]" src={v.icon} alt="" />
                      <span className="ml-1 flex-1">{v.text}</span>
                    </div>
                  )}
                </For>
              </div>
            </div>
          </div>
          {/* 右侧 */}
          <div className="flex w-3/4 border border-black"></div>
        </div>
      </div>
    </>
  );
};
